<!--菜单3：
电表实时监控菜单
-->
<template>
  <div class="data_list">
    <span class="data_list_title">支路仪表 :</span>
    <div class="data_list_body">
      <div class="data_list_body_head">
        <span>仪表名称</span>
      </div>
      <div class="data_list_body_button">
        <input type="button" value="全部展开" class="button_open" @click="openlist">&nbsp;&nbsp;
        <input type="button" value="全部收起" class="button_stop" @click="closelist">
      </div>
      <div class="data_list_body_list">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" class="tree_list" ref="tree"></el-tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expendAll:false,
      data: [{
        id:1,
        label: '一级电表名称1',
        children: [{
          id:2,
          label: '二级电表名称1',
          children: [{
            label: '三级电表名称1sdawwwwwwwwwadwaaaaaaaaadsawsdawsdawd'
          }, {
            label: '三级电表名称2sdwaaaaaaaaaaaaaaaaa'
            },{
            label: '三级电表名称3sdwaaaaaaaaaaaaaaaaaaaa'
          },{
            label: '三级电表名称4'
          },{
            label: '三级电表名称5'
          },{
            label: '三级电表名称6'
          },{
            label: '三级电表名称7'
          },{
            label: '三级电表名称8'
          },{
            label: '三级电表名称9'
          },{
            label: '三级电表名称10'
          }
          ]
        }]
      }, {
        label: '一级电表名称2',
        children: [{
          label: '二级电表名称1',
          children: [{
            label: '三级电表名称1'
          }]
        }, {
          label: '二级电表名称2',
          children: [{
            label: '三级电表名称1'
          }]
        }]
      }, {
        label: '一级电表名称3',
        children: [{
          label: '二级电表名称1',
          children: [{
            label: '三级电表名称1'
          }]
        }, {
          label: '二级电表名称2',
          children: [{
            label: '三级电表名称1'
          }]
        }]
      }],
      flag:false,
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    async openlist(){
      //隐藏实时监测框
      this.$emit('closeBox')
      try {
        this.expendAll = true;
        this.changeTreeNode(this.$refs.tree.store.root)
      }catch (e){
        this.$message({
          type:'info',
          message: e==='cancel' ? '取消操作' : '操作失败'
        })
      }
    },
    async closelist(){
      //展示实时监测框
      this.$emit('showBox')
      try {
        this.expendAll = false;
        this.changeTreeNode(this.$refs.tree.store.root)
      }catch (e){
        this.$message({
          type:'info',
          message: e==='cancel' ? '取消操作' : '操作失败'
        })
      }
    },
    changeTreeNode(node){
      node.expended = this.expendAll
      for (let i = 0 ; i<node.childNodes.length ; i++)
      {
        node.childNodes[i].expanded = this.expendAll;
        if (node.childNodes[i].childNodes.length>0)
        {
          this.changeTreeNode(node.childNodes[i])
        }
      }
    },
    list(){
      return true;
    }
  },
  computed:{

  }
};
</script>

<style>
.data_list{
  height: 100%;
  width: 230px;
}
.data_list_title{
  color: #999999;
}
.data_list_body{
  border: 1px solid;
  border-radius: 4px;
  height: 96%;
}
.data_list_body_head{
  color: white;
  background-color: deepskyblue;
}
.data_list_body_button{
  color: #999999;
  margin-top: 8px;
  text-align: center;
}
.data_list_body_button input{
  background-color: white;
  border-radius: 3px;
  border: 1px solid;
}
.data_list_body_list{
  height: 80%;
  width: 90%;
  overflow: scroll;
  white-space: nowrap;
  font-size: 12px;
  margin-left: 10px;
  margin-top: 8px;
}
.tree_list{
  width: 500px;
}
</style>
